<template>
  <bm-overlay ref="customOverlay" :class="{sample: true, active}" pane="labelPane" @draw="draw">
    <div v-text="text" @touchstart="handleClick"></div>
    <!-- <div class="storeList">{{storename}}</div> -->
  </bm-overlay>
  <!-- <store-list></store-list> -->
</template>

<script>
import BmOverlay from "vue-baidu-map/components/overlays/Overlay.vue";
import Bus from "../../../utils/bus.js";
// import StoreList from './StoreList'
export default {
  name: "my-overlay",
  props: ["text", "position", "active", "storename","userid","bdid"],
  components: {
    BmOverlay,
    Bus
    // StoreList
  },
  watch: {
    position: {
      handler() {
        this.$refs.customOverlay.reload();
      },
      deep: true
    }
  },
data() {
    return {
      goodsList:''
      
    };
  },
  methods: {
    handleClick() {
      console.log(this.bdid);
      console.log(this.userid);
      //传参到map.vue
      this.$emit("func", this.storename);

      //请求对应的店铺列表...
      this.$axios
        .post("http://192.168.0.107/api/map/bdfind", {
          // 还可以直接把参数拼接在url后边
          user_id: this.userid,
          b_d_id: this.bdid
        })
        .then(function(res) {
          console.log(res.data.data);
          // console.log(JSON.stringify(res.data.data));
           Bus.$emit("msg", JSON.stringify(res.data.data));
        })
        .catch(function(error) {
          console.log(error);
        });

      //店铺列表传参到bus
     
    },
    draw({ el, BMap, map }) {
      const { lng, lat } = this.position;
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
    }
  }
};
</script>

<style lang="less">
.storeList {
  position: fixed;
  top: 0;
  z-index: 999;
  color: #000;
  height: 50px;
}
</style>